<template>
  <a-card class="more-setting">
    <a-row :gutter="[8, 8]">
      <a-col :span="formSpan" :offset="formOffset">
        <div class="text-title">撤销设置</div>
      </a-col>
      <a-col :span="formSpan" :offset="formOffset">
        <div>
          <a-checkbox
            :checked="!!formState.revoke"
            @click="handleCheckBoxChange('revoke')"
          >
            允许撤销审批中的申请
          </a-checkbox>
        </div>
        <div class="tip">
          第一个审批节点通过后，申请人仍可撤销申请（配置前已发起的申请不生效）
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import store from "../../../../store";

export default defineComponent({
  name: "MoreSetting",
  props: {
    trigger: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const route = useRoute();
    const state = reactive({
      id: route.query.id,
      formSpan: 16,
      formOffset: 4,
    });

    const formState = reactive({
      revoke: 1,
    });

    const handleCheckBoxChange = (key) => {
      formState[key] = formState[key] == 1 ? 0 : 1;
    };

    const validateForm = () => {
      store.dispatch("SetMoreSetting", formState).then(() => {
        emit("triggerChange", formState);
      });
    };

    watch(
      () => props.trigger,
      () => {
        validateForm();
      }
    );

    const init = () => {
      if (state.id) {
        watch(
          () => store.getters.approvalDetail,
          (detail) => {
            if (detail && detail.id) {
              formState.revoke = detail.revoke;
            }
          }
        );
      }
    };

    init();

    return {
      formState,
      ...toRefs(state),
      handleCheckBoxChange,
    };
  },
});
</script>
<style lang="less" scoped>
.more-setting {
  width: 80%;
  margin: 20px auto;
  .tip {
    padding: 5px 0 5px 28px;
    color: #999;
  }
}
</style>
